import React, { FC, useMemo } from "react"
import { Plus } from "lucide-react"
import { BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath } from "@xyflow/react"

/**
 * 自定义边缘
 */
const CustomEdge: FC<EdgeProps> = (props) => {
  const { id, sourceX, sourceY, targetX, targetY } = props
  console.log("🚀 ~ CustomEdge ~ sourceX, sourceY, targetX, targetY:", sourceX, sourceY, targetX, targetY)

  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY
  })

  const edgeLabelSize = useMemo(() => {
    const width = Math.abs(targetX - sourceX)
    const height = Math.abs(targetY - sourceY)
    return { width, height }
  }, [sourceX, sourceY, targetX, targetY])

  return (
    <>
      <BaseEdge id={id} path={edgePath} />
      <EdgeLabelRenderer>
        <div
          className="absolute pointer-events-auto"
          style={{
            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`
          }}
        >
          <div
            style={{ width: edgeLabelSize.width, height: edgeLabelSize.height }}
            className="opacity-0 hover:opacity-100"
          >
            <div className="flex items-center justify-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-blue-500 cursor-pointer nodrag nopan hover:scale-125 transition-all">
              <Plus className="w-3 h-3 text-white" />
            </div>
          </div>
        </div>
      </EdgeLabelRenderer>
    </>
  )
}

export default CustomEdge
